import React, { useState } from 'react'
import styles from './index.module.less'
import type { ClozeScheme } from '../../interface'
import { ImageViewer } from 'antd-mobile'

export default function ImgUpload(props: { scheme: ClozeScheme; answers: any; idx: number }) {
    const { scheme, answers, idx } = props
    const { properties } = scheme || {}
    const [visible, setVisible] = useState(false)
    const [index, setIndex] = useState(0)

    return (
        <div className={styles.cloze_container}>
            <div className={styles.question}>
                {idx}、{properties?.title}
            </div>
            <div className={styles.answer}>
                {answers?.fileList?.map((item: any, idx1: number) => {
                    return (
                        <img
                            className={styles.img_item}
                            onClick={() => {
                                setIndex(idx1)
                                setVisible(true)
                            }}
                            src={item.url}
                            key={item.url}
                        />
                    )
                })}
            </div>
            {visible && (
                <ImageViewer.Multi
                    images={answers?.fileList.map(item => item.url)}
                    defaultIndex={index}
                    visible={visible}
                    onClose={() => {
                        setVisible(false)
                    }}
                />
            )}
        </div>
    )
}
